<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01 - OL4加载天地图WMTS服务展示地图</title>
    <!--    <script src="../lib/ol4/ol4.js"></script>-->
    <script src='../lib/ol6.4.3/ol.js'></script>
    <script src="../lib/proj4/proj4.js"></script>
    <link rel="stylesheet" href="../css/ol4/ol.css">
    <link rel="stylesheet" href="../css/main.css">
    <style>
        .ol-mouse-position {
            background: #eeeeee;
        }
    </style>
</head>
<body>
<div id="map"></div>
</body>
<script>
	const projection = ol.proj.get('EPSG:4326');
	projection.setExtent([-180, -90, 180, 90]);
	const tileSize = 256;
	const projectionExtent = projection.getExtent();
	const origins = [
		[-180.0, 90.0],
		ol.extent.getTopLeft(projectionExtent)
	];
	const origin = origins[1];
	// console.log('extent:', projectionExtent);
	// console.log('origin:', origin);

	const size = ol.extent.getWidth(projectionExtent) / tileSize;

	const resolutions = [];
	const matrixIds = [];
	for (let z = 0; z < 21; ++z) {
		resolutions[z] = size / Math.pow(2, z);
		matrixIds[z] = z;
	}
	// resolutions.unshift(1.40625 * 2);
	// matrixIds.push(21)
	console.log(resolutions);
	console.log(matrixIds);

	const tileGrid = new ol.tilegrid.WMTS({
		origin,
		resolutions: resolutions,
		// extent: projectionExtent,
		matrixIds: matrixIds
	});

	const url = `http://t0.tianditu.gov.cn/img_c/wmts?tk=4c1f905fb8eaac5743b30da9e0b3f347`;

	const wmtsSource = new ol.source.WMTS({
		url,
		layer: 'img',
		matrixSet: 'c',
		format: 'tiles',
		projection: projection,
		tileGrid: tileGrid,
		style: 'default',
		wrapX: false
	});
	// 图层
	const baseLayer = new ol.layer.Tile({
		source: wmtsSource
	});

	const url1 = `http://t{0-6}.tianditu.gov.cn/cia_c/wmts?tk=4c1f905fb8eaac5743b30da9e0b3f347`;

	const wmtsSource1 = new ol.source.WMTS({
		url: url1,
		layer: 'cia',
		matrixSet: 'c',
		format: 'tiles',
		projection: projection,
		tileGrid: tileGrid,
		style: 'default',
		wrapX: false
	});
	// 图层
	const baseLayer1 = new ol.layer.Tile({
		source: wmtsSource1
	});

	// const circlePoint = ol.proj.transform([116.384722, 39.889916], 'EPSG:4326', 'EPSG:4490');
	const points = [
		[115.2201726257, 37.9116131241],
		[0, 0],
		[116.384722, 39.889916],
		[119.97154785156252, 30.40197483062744],
		[114.342992, 30.506059],
		[114.35494, 30.509986],
		[122.420326, 36.886848],
		[120.01245975494385, 30.285433530807495]
	];
	const centerPoint = points[0];

	const radius = 5000;

	/*    const iconPoint3857 = ol.proj.transform([119.97154785156252, 30.40197483062744], 'EPSG:4326', 'EPSG:3857');

        const iconPoint4326 = ol.proj.transform([iconPoint3857[0] + radius, iconPoint3857[1]], 'EPSG:3857', 'EPSG:4326');*/

	const iconFeature = new ol.Feature({
		geometry: new ol.geom.Point(centerPoint)
	});

	const iconStyle = new ol.style.Style({
		image: new ol.style.Icon({
			anchor: [10, 26],
			anchorXUnits: 'pixels',
			anchorYUnits: 'pixels',
			// src: '../image/position_orange.png'
			src: ''
		})
	});

	iconFeature.setStyle(iconStyle);

	const vectorSource = new ol.source.Vector({
		features: [iconFeature],
		wrapX: false
	});

	const iconLayer = new ol.layer.Vector({
		source: vectorSource
	});

	const map = new ol.Map({
		layers: [
			baseLayer,
			baseLayer1,
			iconLayer
		],
		target: 'map',
		view: new ol.View({
			center: centerPoint,
			projection,
			zoom: 8,
			maxZoom: 19,
			minZoom: 1,
			resolutions
		}),
		controls: ol.control.defaults().extend([
			new ol.control.MousePosition()
		])
	});
	const labelElement = document.createElement('div');
	labelElement.textContent = 'Test Label';
	labelElement.style.backgroundColor = 'rgba(231,141,141,0.79)';
	const labelOverlay = new ol.Overlay({
		element: labelElement,
		position: centerPoint,
	});
	map.addOverlay(labelOverlay);

	// const metersPerUnit = map.getView().getProjection().getMetersPerUnit();

	// console.log(metersPerUnit);

	// const realRadius = radius / metersPerUnit;
	//
	// const circleFeature = new ol.Feature({
	//     geometry: new ol.geom.Circle(centerPoint, realRadius * 1.145)
	// });
	//
	// vectorSource.addFeature(circleFeature);

</script>
</html>
